<script setup lang='ts'>
  import { onActivated, reactive } from 'vue';
  import { accountApi } from '@/api/controller';
  import { ToastWarning, Toastloading, copyText } from '@/utils/public';
  import { rechargeChannels } from '@/pinia/getter';
  import { getDateArray, getPlayEndTime } from '@/utils';
  import table2excel from 'js-table2excel';
  import Pagination from "@/components/Pagination/index.vue";
  import { useRoute } from 'vue-router'
  const $route = useRoute()
  interface listQueryForm {
    page:number
    limit:number
    uuid:string | number
    user_id:string | number
    nickname:string
    status:number
    out_trade_sn:number
    end_date:number
    begin_date:number
  }
  let listQuery = reactive({
    page: 1,
    limit: 10,
    status:-1,
    nickname:''
  }) as listQueryForm
  const action = reactive({
    list: [],
    total: 0,
    dateArr:getDateArray('canon') as Array<number>
  })
  const statusOptions = [
    { label: '全部', value: -1 },
    { label: '已支付', value: 1 },
    { label: '未支付', value: 0 },
    { label: '其它', value: -2 }
  ]
  const payTypeFilter = (type=0)=>{
    const obj = rechargeChannels.value.find(res=>res.type == type) || {label:type}
    return obj.label
  }
  const handleDownload = async()=>{
    const loading = Toastloading('数据导出中...')
    const { playTime=0, endTime=0} = getPlayEndTime(action.dateArr)
    const query = {...listQuery}
    query.page = 1
    query.limit = action.total
    const res = await accountApi.getRechargeRecords({
      ...query,
      begin_date:playTime,
      end_date:endTime
    })
    const { data=[]} = res.data
    loading.close()
    if(data.length == 0) {
      ToastWarning('暂无可导出数据')
      return
    }
    const tHeader = [
      { title: 'UUID', key: "uuid"},
      { title: 'ID', key: "user_id" },
      { title: '昵称', key: "nickname"},
      { title: '注册时间', key: "number_create_time"},
      { title: '是否首充用户', key: "is_firstText"},
      { title: '支付时间', key: "pay_timestamp"},
      { title: '充值金额(单位:元)', key: "price"},
      { title: '充值钻石数', key: "diamond_amount"},
      { title: '支付类型', key: "pay_typeText"},
      { title: '交易编号', key: "order_sn",type:'text'},
      { title: '外部订单号', key: "out_trade_sn",type:'text'},
    ]
    const list = data.map((obj:any)=>{
      const { numbers={},pay_type=0,is_first=0  } = obj
      const { uuid='',user_id='',nickname='',create_time='', } = numbers
      return {
        uuid,user_id,nickname,number_create_time:create_time,
        is_firstText:['非首充用户','首充用户'][is_first],
        pay_typeText:payTypeFilter(pay_type),
        ...obj
      }
    })
    table2excel(
      tHeader,
      list,
      `${playTime?playTime:''}${endTime?'-'+endTime:''}${listQuery.nickname?'_'+listQuery.nickname:''}充值流水`)
  }
  const getList = async()=>{
    const loading = Toastloading()
    const timeObi = getPlayEndTime(action.dateArr)
    const res = await accountApi.getRechargeRecords({
      ...listQuery,
      begin_date:timeObi.playTime,
      end_date:timeObi.endTime
    })
    const { data=[], total=0 } = res.data
    action.list = data
    action.total = total
    loading.close()
  }
  const handleFilter = ()=>{
    listQuery.page = 1
    getList()
  }
  const resetQuery = ()=>{
    Object.assign(listQuery,{
      page:1,
      limit:20,
      status:-1,
      uuid:'',
      user_id: '',
      nickname:'',
      out_trade_sn:'',
    })
    action.dateArr = getDateArray('canon') as Array<number>
    getList()
  }
  onActivated(()=>{
    const uuid = $route.query.uuid as string
    if(!uuid) return
    listQuery.uuid = uuid
    getList()
  })
</script>

<template>
  <div class="xm-content">
    <div class="xm-headTab labelBox">
      <div class="labelItem">
        <div class="label">用户UUID：</div>
        <el-input v-model="listQuery.uuid" placeholder="请输入用户UUID" style="width: 140px" />
      </div>
      <div class="labelItem">
        <div class="label">用户ID：</div>
        <el-input v-model="listQuery.user_id" placeholder="请输入用户ID" style="width: 140px" />
      </div>
      <div class="labelItem">
        <div class="label">用户昵称：</div>
        <el-input v-model="listQuery.nickname" placeholder="请输入用户昵称" style="width: 160px" />
      </div>
      <div class="labelItem">
        <div class="label">流水状态：</div>
        <el-select v-model="listQuery.status" placeholder="流水状态">
          <el-option
          v-for="item of statusOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value" />
        </el-select>
      </div>
      <div class="labelItem">
        <div class="label">外部订单号：</div>
        <el-input v-model="listQuery.out_trade_sn" placeholder="请输入外部订单号" style="width: 300px" />
      </div>
      <div class="labelItem">
        <div class="label">日期：</div>
        <el-date-picker
          v-model="action.dateArr"
          type="daterange"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        />
      </div>
      <div class="labelItem">
      <el-button type="primary" @click="handleFilter">查询</el-button>
      <el-button type="primary" @click="resetQuery">重置</el-button>
      <el-button type="warning" @click="handleDownload">导出</el-button>
    </div>
    </div>
    <el-table class="xm-main xm-TableCenter" :data="action.list" border>
      <el-table-column min-width="100" prop="numbers.uuid" label="UUID" />
      <el-table-column min-width="100" prop="numbers.user_id" label="ID" />
      <el-table-column :show-overflow-tooltip="true" min-width="150" prop="numbers.nickname" label="昵称" />
      <el-table-column min-width="200" prop="numbers.create_time" label="注册时间" />
      <el-table-column width="200" prop="is_first" label="是否首充用户">
        <template #default="scope">
          {{ ['非首充用户','首充用户'][scope.row.is_first] }}
        </template>
      </el-table-column>
      <el-table-column min-width="200" prop="pay_timestamp" label="支付时间" />
      <el-table-column min-width="140" prop="price" label="充值金额(单位:元)" />
      <el-table-column min-width="100" prop="diamond_amount" label="充值钻石数" />
      <el-table-column min-width="100" prop="pay_type" label="支付类型">
        <template #default="scope">
          {{ payTypeFilter(scope.row.pay_type) }}
        </template>
      </el-table-column>
      <el-table-column min-width="240" prop="open_id" label="三方唯一标识">
        <template #default="scoped">
          <div class="pointer" @click="copyText(scoped.row.open_id)">
            {{ scoped.row.open_id }}
          </div>
        </template>
      </el-table-column>
      <el-table-column min-width="240" prop="order_sn" label="交易编号">
        <template #default="scoped">
          <div class="pointer" @click="copyText(scoped.row.order_sn)">
            {{ scoped.row.order_sn }}
          </div>
        </template>
      </el-table-column>
      <el-table-column min-width="280" prop="out_trade_sn" label="外部订单号">
        <template #default="scoped">
          <div class="pointer" @click="copyText(scoped.row.out_trade_sn)">
            {{ scoped.row.out_trade_sn }}
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Pagination v-show="action.total > 0" :total="action.total" v-model:page="listQuery.page"
      v-model:limit="listQuery.limit" @pagination="getList" />
  </div>
</template>

<style lang='scss' scoped>

</style>